<template>
  <div class="person">
    <h2>情况二：监视ref定义的【对象类型】数据:直接写数据名，监视的是对象的【地址值】，若想监视对象内部的数据，要手动开启深度监视。</h2>
    <h2>姓名：{{ person.name }}</h2>
    <h2>姓名：{{ person.age }}</h2>
    <button @click="handleName">修改姓名</button>
    <button @click="handleAge">修改年龄</button>
    <button @click="handlePer">修改整个人</button>
  </div>
</template>
  <script setup lang='ts'>
import { ref, watch } from "vue";
let person = ref({
  name: "张三",
  age: 18
});
function handleName() {
  person.value.name += "~";
}
function handleAge() {
  person.value.age += 1;
}
function handlePer() {
  person.value = { name: "历史", age: 123 };
}
//watch("监听谁",回调函数,"深度监听")
//情况一：监视ref定义的【对象类型】数据,监视的是地址值，若想监视对象内部属性的变化，需要手动打开深度监听
//{deep:true,immediate:true}如果加上immediate:true,表示页面初始也会监听一次，此时oldV为undefined

/* 
  注意：
    若修改的是ref定义的对象中的属性， newValue和 oldValue都是新值，因为它们是同一个对象。
    eg:person.value.name += "~";
    若修改整个ref定义的对象,newValue是新值， oldValue是旧值，因为不是同一个对象了。
    eg:person.value = {name:"历史",age:123};
  */
watch(
  person,
  (newV, oldV) => {
    console.log("person变化了", newV, oldV);
  },
  { deep: true }
);
</script>
  <style scoped>
.person {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}
</style>